<!--
NOTE: If you need/want this page changed to include
other browsers see https://github.com/KhronosGroup/WebGL/tree/master/other/get.webgl.org
-->
<!doctype html>
<html>
  <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></meta>
    <style>

      body {

        font-family: ubuntu, helvetica, arial, sans, sans-serif;

      }

      a {

        color: #3194d5;

      }

      .webgl-div {
          text-align: left;
      }
      .webgl-div li {
          margin-top: 1em;
      }
      .webgl-div code {
          background: #eee;
          padding: 0.3em;
      }

      @media (max-device-width: 480px) {

          #wrapper #support h1 {
            font-weight: bold;
            font-size: 20px;
            margin: 10px 0px;
          }
          #wrapper #support .webgl-div div {
            margin: 10px 10px;
          }
          #wrapper #support #logo-container {
            text-align: center;
          }
          #wrapper #support canvas {
            margin: 10px 0px 10px 0px;
          }
          #wrapper hr {
            margin: 10px 0px;
          }
          #wrapper #moreinfo {
            margin: 10px 0px 0px 0px;
          }

      }

      @media (min-device-width: 600px) {

          #wrapper #support h1 {
            font-weight: normal;
            font-size: 40px;
            margin: 40px 0px;
          }

          #wrapper #support {
            text-align: center;
          }

          #wrapper #support canvas {
            margin: 30px 0px 10px 0px;
          }

          #wrapper hr {
            margin: 40px 0px;
          }

          #wrapper {
            width: 600px;
          }

          #wrapper #moreinfo {
            width: 250px;
            margin: 0px 20px 0px 20px;
            float: left;
          }

          #wrapper #resources {
            width: 250px;
            height: 150px;
            margin: 0px 20px 0px 40px;
            float: left;
          }

          #wrapper #support .webgl-div div {
            margin: 20px 100px;
          }
      }

      #wrapper {
        margin: auto;
      }

      #wrapper hr {
        border-top: solid #e3e3e3;
        border-width: 1px 0px 0px 0px;
        height: 0px;
      }

      #wrapper #support h1 {
        color: #33a933;
      }

      #wrapper #resources div {
        font-size: 13px;
      }

      #wrapper #moreinfo div {
        font-size: 13px;
      }

      .webgl-hidden {
          display: none;
      }

      #webgl-browser-list {
          white-space: nowrap;
      }

      #hostedby, #hostedby a {
          clear: left;
          font-size: 12px;
          text-align: center;
          color: #e5e5e5;
      }

    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="support">

            <h1 class="good">Enabling WebGL2</h1>
            <div class="webgl-div">
                <p>
                  As of September 13, 2016 WebGL2 is still an experimental web technology.
                  It is available in both Firefox 48 and Chrome 53.
                </p>
                <p>
                  To enable it:
                </p>
                <ul>
                  <li><a id="firefox"></a>
                      In Firefox
                      <ol>
                         <li>Go to <code>about:config</code>
                         <li>search for <code>webgl2</code>
                         <li>double click on <code>webgl.enable-prototype-webgl2</code> until the value is <code>true</code>
                         <li>restart Firefox
                      </ol>
                  </li>
                  <li><a id="chrome"></a>
                     In Chrome
                        <ol>
                           <li>Go to <code>about:flags</code>
                           <li>Press Ctrl-F or Cmd-F and search for <code>webgl 2.0</code>
                           <li>Find <code>WebGL 2.0 Prototype</code> and click <code>enable</code>
                           <li>restart Chrome
                        </ol>
                  </li>
                </ul>


            </div>
      </div>
    </div>
  </body>
</html>

